import React, { useState } from 'react'
import { connect } from 'react-redux'
import { creatAddPersonAction } from '../../redux/actions/person'
import { nanoid } from 'nanoid'

function Person(props) {
  // console.log(props.persons)

  const [form, setForm] = useState({})

  const onChangeValue = (e) => {
    const { name, value } = e.target
    setForm({ ...form, [name]: value })
  }

  const addPerson = () => {
    props.add({ id: nanoid(), ...form })
  }

  return (
    <div>
      <h1>我是Person组件，上方组件和为{props.count}</h1>
      <input type='text' name='name' placeholder='请输入姓名' onChange={onChangeValue} />
      <input type='text' name='age' placeholder='请输入年龄' onChange={onChangeValue} />
      <button onClick={addPerson}>添加</button>
      <ul>
        {props.persons &&
          props.persons.map((v) => (
            <li key={v.id}>
              {v.name}----{v.age}
            </li>
          ))}
      </ul>
    </div>
  )
}

export default connect((state) => ({ persons: state.persons, count: state.count }), {
  add: creatAddPersonAction
})(Person)
